<!DOCTYPE html>
<html lang="zh-Hans">

<head>
	<meta charset="UTF-8">
	<title>vue-todolist</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="bootstrap-3.3.7.css">
	<link rel="stylesheet" href="todolist.css">
	<link rel="stylesheet" href="animated.css">
</head>

<body>
	<div class="todoContainer">
		<div class="panel-body form-inline">
			<input type="text" placeholder="写下今天要做的事情吧~" id="id-input-todo" class="form-control" v-model="content"
				@keyup.enter="add()">
			<button id="id-button-add" class="btn btn-primary" v-on:click="add()">add</button>
		</div>
		<div class="count"><span class="btn bg-o">想做的事有{{this.id}}件</span><span
				class="btn bg-g">做了的事有{{this.countFinished}}件</span></div>

		<div class="isFinished-title bg-o">未完成</div>
		<table class="table  table-hover table-striped">
			<thead>
				<tr>
					<th>Id</th>
					<th class="warning">要做的事</th>
					<th>开始时间</th>
					<th>状态</th>
					<th>选项</th>
				</tr>
			</thead>
			<tbody is="transition-group" appear enter-active-class="animated bounceInLeft"
				leave-active-class="animated bounceOutRight">
				<tr v-for="item in Todos_will" :key="item.id">
					<td>{{ item.id }}</td>
					<td :class="[item.done ? 'done':'']" class="info">{{ item.content}}</td>
					<td>{{ item.time }}</td>
					<td>{{ item.done ? '已完成':'未完成'}}</td>
					<td>
						<button class="btn btn-primary" href=""
							@click.prevent="done(item.id)">{{ item.done ? '还没做好':'做完了~'}}</button>
						<button class="btn btn-danger" href="" @click.prevent="del(item.id)">删除</button>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="isFinished">
			<div class="isFinished-title bg-g">已完成</div>
			<table class="table  table-hover">
				<thead>
					<tr>
						<th>Id</th>
						<th class="warning">要做的事</th>
						<th>完成时间</th>
						<th>状态</th>
						<th>选项</th>
					</tr>
				</thead>
				<tbody is="transition-group" appear enter-active-class="animated bounceInLeft"
					leave-active-class="animated bounceOutRight">
					<tr v-for="item in Todos_finished" :class="[item.done ? 'bg-gray':'']" :key="item.id">
						<td>{{ item.id }}</td>
						<td :class="[item.done ? 'done':'']">{{ item.content}}</td>
						<td>{{ item.finshedTime }}</td>
						<td>{{ item.done ? '已完成':'未完成'}}</td>
						<td>
							<button class="btn btn-primary" href=""
								@click.prevent="done(item.id)">{{ item.done ? '还没做好':'做完了~'}}</button>
							<button class="btn btn-danger" href="" @click.prevent="del(item.id)">删除</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
	<script src="todolist.js" type="text/javascript"></script>
	<script>
		var vm = new Vue({
			el: ".todoContainer",
			data: {
				id: '',
				countFinished: 0,
				todos: [],
				content: '',
				todo: {
					time: '',
					content: '',
					finshedTime: '',
				},
			},
			created: function () {
				this.todos = load()
				if (isEmptyObject(this.todos)) {
					this.id = 0
				} else {
					this.id = load().slice(-1)[0].id
				}
				this.countFinished = this.todos.filter(function (todo) {
					return todo.done
				}).length
			},
			updated: function () {
				this.countFinished = this.todos.filter(function (todo) {
					return todo.done
				}).length
			},
			methods: {
				add: function () {
					var todo = {
						id: ++this.id,
						time: new Date().toLocaleString(),
						done: false,
						content: this.content,
					}
					this.todos.push(todo)
					this.content = ''
					save(this.todos)
				},
				del: function (id) {
					var index = this.todos.findIndex(todo => {
						if (todo.id == id) {
							return true;
						}
					})
					this.todos.splice(index, 1)
					save(this.todos)
				},
				// toggleDone:function(todo){
				// 	todo.done = !todo.done
				// },
				done: function (id) {
					var index = this.todos.findIndex(todo => {
						if (todo.id == id) {
							return true;
						}
					})
					this.todos[index].finshedTime = new Date().toLocaleString()
					this.todos[index].done = !this.todos[index].done
					save(this.todos)
				},
			},
			computed: {
				Todos_finished: function () {
					return this.todos.filter(function (todo) {
						return todo.done
					})
				},
				Todos_will: function () {
					return this.todos.filter(function (todo) {
						return !todo.done
					})
				},
				Todos_want: function () {
					return this.id
				}
			},
		})
	</script>
</body>

</html>